<template>
  <div class="app-container">
    <!--购物车-->
    <el-card class="box-card " shadow="hover" >

      <div slot="header" class="clearfix">
        <div class="media-display" style=" display: flex;justify-content: space-between;">
          <el-link :underline="false" style="font-size: 20px">购物车</el-link>
          <el-button type="primary" @click="$router.push('/userList')" icon="el-icon-back" circle></el-button>
        </div>
      </div>
      <div class="clearfix">
        <el-table
          row-class-name="row-class"
          show-overflow-tooltip="true"
          ref="multipleTable"
          :data="cartVoList"
          :fit="true"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <!--                    <el-table-column
                                      type="index"
                                      index="1">
                              </el-table-column>-->
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            label="图片"
            width="150">
            <template slot-scope="scope">
              <img @click="$router.push(`/product/${scope.row.productId}`)"
                   style="cursor: pointer"
                   :src="prefix + scope.row.specsImg" width="80" height="80" alt="商品图片">
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="商品名称"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="productSpecs"
            label="规格"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.productSpecs | parseSpecs }}
            </template>
          </el-table-column>

          <el-table-column
            prop="price"
            label="单价"
            class-name="label-center">
          </el-table-column>
          <el-table-column
            prop="count"
            label="数量"
            class-name="label-center">
            <template slot-scope="scope">
              <el-input v-model="scope.row.count"
                        style="width: 80px;margin: 0 5px"
                        size="medium"
                        :readonly="true" placeholder="请输入内容"></el-input>

            </template>
          </el-table-column>
          <el-table-column
            prop="totalPrice"
            label="小计">
            <template slot-scope="scope">
              {{ scope.row.price * scope.row.count }}
            </template>
          </el-table-column>

        </el-table>
        <div style="margin-top: 20px;margin-right: 50px;float: right;">
          <el-button @click="toggleSelection()">取消选择</el-button>
        </div>
      </div>

    </el-card>

    <!--结算-->
    <el-card class="box-card " shadow="hover" style="margin: 20px 0">
      <div class="settlement">
        <div>
          <el-link :underline="false">
            已选择了
            <span style="font-size: 20px;color: chocolate">{{ totalCount }}</span>
            件商品</el-link>
        </div>

        <div>
          <el-link :underline="false" style="margin-right: 30px">
            合计
            <span style="font-size: 20px;color: chocolate">{{ totalPrice }}</span>
            元
          </el-link>
        </div>
      </div>
    </el-card>
  </div>

</template>

<script>
  import { getCartByUserIdReq } from "@/api/cart";
  import settings from '@/settings'

  export default {
    name: "ShoppingCart",// 购物车页面
    data() {
      return {
        prefix : settings.prefix || 'https://mall-resource-bucket.oss-cn-hangzhou.aliyuncs.com',// 全局前缀
        removeList: [],// 要删除的 商品规格id 数组
        cartVoList: [],// 购物车信息
        selectedCart: [],// 被选中的购物车信息
        userId: '',
      }
    },
    methods: {
      toOrder(){// 去订单页
        this.$router.push('/order')
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(selection) {
        this.removeList.length = 0;
        this.selectedCart = selection;
        console.log(" this.selectedCart = ", this.selectedCart)
      },

      eventBlur(event){
        if(event.nodeName === 'SPAN' || event.nodeName === 'I'){event = event.parentNode;}event.blur();
      },
      init(){
        getCartByUserIdReq({userId: this.userId}).then(response => {
          console.log(response)
          if (response.state === true) {
            this.cartVoList = response.data.cartVoList//保存产品信息
            this.$notify.success({title: '成功',message: response.message, duration: 1500});
          }else{
            this.$notify.warning({title: '失败',message: response.message, duration: 1500});
          }
        })
      },
    },
    computed: {
      totalCount(){
        return this.selectedCart.length;
      },
      totalPrice(){
        let sum = 0;
        this.selectedCart.forEach((item)=>{
          sum += (item.price * item.count)
        })
        return sum;
      }
    },
    filters: {
      parseSpecs(specs){// 解析规格
        let specsObj = JSON.parse(specs);
        let str = "";
        Object.keys(specsObj).forEach((key)=>{
          str += specsObj[key] + " "
        })
        return str
      }
    },
    beforeMount(){
      this.userId = this.$route.params.userId;
      this.init()
    },
    mounted(){
    },
  }
</script>

<style scoped>
  .shopping-cart-wrap{
    width: 70vw;
    margin: 0 auto;
  }
  >>>.el-input__inner{
    text-align: center;
  }

  >>>.label-center{
    text-align: center;
  }
  >>>.row-class{
    height: 60px;
    font-size: 20px;
  }

  .settlement{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
  }

</style>
